import { Button, Modal } from "view-ui-plus";
import { defineComponent, ref } from "vue";
import type { PropType } from "vue";

export default defineComponent({
  props: {
    // modelValue: {
    //   type: Boolean,
    //   dafault: true,
    // },
    title: {
      type: String,
      default: "",
    },
    callback: {
      type: Function as PropType<(...res: any) => Promise<any>>,
      default: () => {},
    },
    okText: {
      type: String,
      default: "确定",
    },
    cancelText: {
      type: String,
      default: "取消",
    },
    modelProps: {
      type: Object,
      default: () => {},
    },
    onOnOk: {
      type: Function as PropType<(...res: any) => any>,
      default: () => {},
    },
    onOnCancel: {
      type: Function as PropType<(...res: any) => any>,
      default: () => {},
    },
    loading: {
      type: Boolean,
      default: true,
    },
    width: {
      type: Number,
      default: 1000,
    },
    onOnVisibleChange: {
      type: Function as PropType<(...res: any) => any>,
      default: () => {},
    },
    fullscreen: {
      type: Boolean,
      default: false,
    },
    isDetail: {
      type: Boolean,
      default: false,
    },
    content: {
      type: Function,
      default: () => {},
    },
  },
  emits: ["update:modelValue", "confirm"],
  setup(props, { emit, slots, expose }) {
    const fullscreen = ref(false);

    const title = ref(props.title);

    const visible = ref(false);

    const onFullscreen = () => {
      fullscreen.value = true;
    };

    const closeFullscreen = () => {
      fullscreen.value = false;
    };

    const onOnVisibleChange = (visible) => {
      title.value = props.isDetail ? `${props.title}详情` : props.title;
      props.onOnVisibleChange(visible);
      setTimeout(() => {
        fullscreen.value = false;
      }, 500);
    };

    const onVisible = (flag: boolean) => {
      visible.value = flag;
    };

    const onOnOk = () => {
      visible.value = false;
      props.onOnOk();
    };

    const onOnCancel = () => {
      visible.value = false;
      props.onOnCancel();
    };

    expose({
      onVisible,
    });

    const header = () => {
      return (
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
          }}
        >
          <div
            style={{
              fontSize: "16px",
              height: "20px",
              lineHeight: "20px",
              color: "#17233d",
              fontWeight: 500,
            }}
          >
            {props.title}
          </div>
          {fullscreen.value ? (
            <i
              style={{ marginRight: "25px", cursor: "pointer" }}
              class="ivu-icon i-icon i-icon-exit-full-screen"
              onClick={closeFullscreen}
            ></i>
          ) : (
            <i
              style={{ marginRight: "25px", cursor: "pointer" }}
              class="ivu-icon i-icon i-icon-full-screen"
              onClick={onFullscreen}
            ></i>
          )}
        </div>
      );
    };

    const renderDetailFooter = () => {
      return (
        <div
          style={{
            display: "flex",
            flexDirection: "row-reverse",
          }}
        >
          <Button onClick={props.onOnCancel}>关闭</Button>
        </div>
      );
    };

    const footer = () => {
      if (!!slots.footer) {
        return slots.footer();
      } else if (props.isDetail) {
        return renderDetailFooter();
      } else {
        return null;
      }
    };

    return () => {
      return (
        <Modal
          title={title.value}
          model-value={visible.value}
          onOnOk={onOnOk}
          onOnCancel={onOnCancel}
          loading={props.loading}
          ok-text={props.okText}
          cancel-text={props.cancelText}
          footer-hide={false}
          width={props.width}
          v-slots={{ header: header, footer: footer }}
          fullscreen={fullscreen.value}
          draggable={true}
          reset-drag-position={true}
          onOnVisibleChange={onOnVisibleChange}
        >
          {props.content()}
        </Modal>
      );
    };
  },
});
